/**
 * @作者：耿
 * 
 */

import React, { Component } from 'react'
import { observable, autorun } from 'mobx';
import store from '../../store'
import { inject, observer } from 'mobx-react';
import './index.css'

@observer
class Products extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {};
  // }

  state = {
    users: [],
    totalNum: 0,
  }

  componentDidMount() {
    let _this = this;

    //异步action 接口获取商品数据
    store.getList()

  }

  addCart = (product) => {
    store.addCart(product);
  }

  render() {

    // const {user} = this.props.userStore;
    return (
      <div>
        <h3>Products</h3>
        <ul>
          {store.list.map((item, index) => {
            return (
              <li key={index} className='li_box'>
                <span>{item.name} </span>
                <span>{item.price} 元</span>
                <span onClick={() => this.addCart(item)}>添加 +</span>
              </li>
            )
          })}
        </ul>
      </div>

    )
  }
}


export default Products
